林肯 Abraham Lincoln 說過:
如果給我6個小時砍下一顆樹,我會用前面4個小時把斧頭磨利。
Give me six hours to chop down a tree and I will spend the first four sharpening the axe.
這也是我們常聽到的工欲善其事必先利其器的寓意。
寫 Vue 之前除了閱讀官方文檔外,我們到底需不需要具備什麼樣的額外知識呢?
如果你只有 HTML
CSS
Javascript
的基礎,這樣就算依照官方文件的教學,相信你也是可以一步一步慢慢完成你的網站的,但我在這邊列出一些我建議學習的額外知識,他們可以讓你在專案的各個階段 (規劃、建置、維護、除錯、擴充) 更加的順利
必要學習
我們知道 Vue 一個 聲明式
的框架,這意味著我們主要會注重在資料(狀態)
的維護以及流程邏輯
上,
基本上不會像以前使用 jQuery 命令式
一樣直接操作 DOM ,通常我們使用 Vue 就不建議在同時使用 jQuery 之類的函式庫了,這意味著我們會使用更多的原生 API,所以多多認識原生的 JS 有哪些好用的 API,特別是 Array
Object
Set
Map
這些跟資料處理有關的 API 應該更要熟悉,這樣可以讓我們在撰寫程式上更得心應手。
雖然很多事情 Vue 都幫我們處理好了,但它終究是用 Javascript 寫出來的框架,而且當我們的專案越來越複雜功能越來越多,你會發現寫 Javascript 的比例會越來越高,有更扎實的 Javascript 觀念,比較不會有程式為什麼沒有照著我的想法動的狀況發生,出現 Bug 時也能比較有方向可能發生的原因是什麼,不會像無頭蒼蠅一樣不知道怎麼找解法
拜 Babel 大神神威,我們可以安心的使用新世代的 Javascript 語法,他可以幫我們轉譯向下相容ES2015 的語法,讓我們對於瀏覽器相容性的問題可以減到最低,學習 ES6 的語法可以讓我們在撰寫程式上更簡潔,這邊列出我認為必定要會的一些功能
推薦學習
學習這些實踐可以幫我們更好的組織我們的專案不論是程式面
或是架構
,底下舉出一些實踐的例子
單一職責原則 (Single Responsibility Principle)
設計 Component 時更專注於該 Component 只負責某一個任務,讓我們不會寫出過於龐大的 Component
DRY原則(Don’t Repeat Yourself)
我們會把 Component 共用的片段抽取至 mixins (Vue3 建議直接學習 Composition API)
KISS原則(Keep It Simple, Stupid)
可以參考 在 Vue 風格指南中简单的计算属性 就是一個 KISS 原則很好的範例
---等等族繁不被記載,關於其他的實踐在這邊就不一一列出,請各位自行 Google 發掘囉
SASS
SCSS
等CSS 預處理器讓我們可以寫出更簡潔更容易擴充更好維護的 CSS
NPM
最基本的安裝更新移除,這樣你才能維護你的套件
Webpack
了解他是怎麼把前端所需要的一切資源打包再一起,Vue-cli 的背後也是用 Webpack 來啟動專案的
Browser Dev Tool
Vue Dev Tool
學習你習慣使用的瀏覽器它所提供的開發者工具,開發者工具讓你在開發階段更順利以及Debug 更快速
當然 Vue 也有提供非常好用的瀏覽器開發外掛,讓你在 Dev mode 時可以即時追蹤整個 Component、
Event、 Vuex 裡的資料狀態
Refs:
新手向:Vue 2.0 的建议学习顺序